import React from "react";
import { Button, List } from "antd-mobile";
import TabBar from "@/components/hjTabBar.jsx";
import { withRouter } from "react-router-dom";
import { http } from "@/utils/request";
import api from "@/utils/api";
import storage from "@/utils/storage.js";
import "./index.less";
import Status from "@/components/status"
const Item = List.Item;

class Mine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: "",
      amount: 5000,
      order: {
        amount: "1000",
        dateStart: "1",
        dateEnd: "12",
        orderStatus: "00",
        day: "100",
      },
      advanceFlag: "0",
      loanFlag: "0",
    };
  }

  componentWillMount() {
    http.post(api.getStaffItemByOpenId).then((res) => {
      let { idCard, name, idPicPre, idPicBak } = res.data;
      let userInfo = storage.get("userInfo") || {};
      userInfo = {
        ...userInfo,
        idCard,
        name,
        idPicPre,
        idPicBak,
      };
      storage.set("userInfo", userInfo);
      this.setState({
        ...res.data,
      });
    });
  }

  render() {
    let { order, advanceFlag, loanFlag } = this.state;
    return (
      <div className="mine">
        <div className="mineBg">
          <div style={{ height: "0.8rem" }}></div>
          <div className="mineMsg">
            <div className="top flex flex-column-center" style={{marginBottom:'0.8rem'}}>
              <img
                style={{ width: "44px" }}
                src={require("../../images/mine/headImg.png")}
              />
              <p style={{ marginLeft: "8px" }}>{this.state.phone}</p>
            </div>
            <Status advanceFlag={advanceFlag}  loanFlag={loanFlag} order={order}/>
          </div>
        </div>
        <div className="message">
          <List>
            <Item
              thumb={require("../../images/mine/img1.png")}
              arrow="horizontal"
              onClick={() => {
                this.props.history.push("bank");
              }}
            >
              我的银行卡
            </Item>
            <Item
              thumb={require("../../images/mine/img2.png")}
              onClick={() => {
                this.props.history.push("record");
              }}
              arrow="horizontal"
            >
              薪资发放记录
            </Item>
            <Item
              thumb={require("../../images/mine/img3.png")}
              onClick={() => {
                this.props.history.push("previewRecord");
              }}
              arrow="horizontal"
            >
              预支记录
            </Item>
            <Item
              thumb={require("../../images/mine/img4.png")}
              onClick={() => {
                this.props.history.push("verify");
              }}
              arrow="horizontal"
            >
              实名认证
            </Item>
          </List>
        </div>
        <TabBar selectedTab="mine"></TabBar>
      </div>
    );
  }
}

export default withRouter(Mine);
